<script setup>
import {ref, onMounted} from 'vue'
import {getCheckpointByID, getCheckpointList, saveCheckpointList} from "src/utils/config";
import {nanoid} from "nanoid";
import TaskDetail from "components/TaskDetail.vue";
import {formatCheckpointFlow} from "src/utils/format-flow";

const welcome_checkpoint_list = ref([])
const main_checkpoint_list = ref([])
const sub_checkpoint_list = ref([])
const showFlowRef = ref('')
const showDetail = ref(false)

const checkpoint_list = getCheckpointList()
let checkpoint = {}
const edit_checkpoint = ref({})

onMounted(() => {
  checkpoint_list.forEach(function (checkpoint) {
    // console.log('mounted', checkpoint)
    switch (checkpoint.group) {
      case 'WELCOME':
        welcome_checkpoint_list.value.push(checkpoint);
        break;
      case 'MAIN':
        main_checkpoint_list.value.push(checkpoint);
        break;
      case 'SUB':
        sub_checkpoint_list.value.push(checkpoint);
        break;
    }
  })
})

function onMenuClick(id) {
  checkpoint = getCheckpointByID(checkpoint_list, id)
  edit_checkpoint.value = checkpoint
  showFlowRef.value.handleShow(checkpoint)
}

function onSaveCheckpoint() {
  // console.log(checkpoint)
  formatCheckpointFlow(checkpoint)
}

function saveCheckpointFlow() {
  // console.log('onchange', checkpoint_list)
  saveCheckpointList(checkpoint_list)
}

// function styleFn(offset) {
//   console.log(offset)
//   return { minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh' }
// }

function addTaskMessage() {
  const operationTask = {
    code: nanoid(),
    checkpoint: checkpoint.id,
    type: 100,
    memo: '图文卡',
    content: '',
    content_css: '',
    image: '',
    image_css: '',
    front_image: '',
    front_image_css: '',
  }
  showFlowRef.value.handleAddNode(operationTask)
}


function addTaskGPS() {
  const operationTask = {
    code: nanoid(),
    checkpoint: checkpoint.id,
    type: 101,
    memo: 'GPS卡',
    content: '',
    content_css: '',
    image: '',
    image_css: '',
    front_image: '',
    front_image_css: '',
    gps: '',
    range: 70,
  }
  showFlowRef.value.handleAddNode(operationTask)
}

function addTaskBeacon() {
  const operationTask = {
    code: nanoid(),
    checkpoint: checkpoint.id,
    type: 102,
    memo: '蓝牙卡',
    content: '',
    content_css: '',
    image: '',
    image_css: '',
    front_image: '',
    front_image_css: '',
    beacon: '',
    rssi: 100,
  }
  showFlowRef.value.handleAddNode(operationTask)
}

function addTaskCheck() {
  const operationTask = {
    code: nanoid(),
    checkpoint: checkpoint.id,
    type: 103,
    memo: '确认卡',
    content: '',
    content_css: '',
    image: '',
    image_css: '',
    front_image: '',
    front_image_css: '',
    confirm: '',
  }
  showFlowRef.value.handleAddNode(operationTask)
}

function addTaskKeys() {
  const operationTask = {
    code: nanoid(),
    checkpoint: checkpoint.id,
    type: 104,
    memo: '密钥卡',
    content: '',
    content_css: '',
    image: '',
    image_css: '',
    front_image: '',
    front_image_css: '',
  }
  showFlowRef.value.handleAddNode(operationTask)
}

function addTaskAnswer() {
  const operationTask = {
    code: nanoid(),
    checkpoint: checkpoint.id,
    type: 105,
    memo: '答题卡',
    content: '',
    content_css: '',
    image: '',
    image_css: '',
    front_image: '',
    front_image_css: '',
  }
  showFlowRef.value.handleAddNode(operationTask)
}

function addTaskScan() {
  const operationTask = {
    code: nanoid(),
    checkpoint: checkpoint.id,
    type: 106,
    memo: '扫一扫',
    content: '',
    content_css: '',
    image: '',
    image_css: '',
    front_image: '',
    front_image_css: '',
  }
  showFlowRef.value.handleAddNode(operationTask)
}

function addTaskShake() {
  const operationTask = {
    code: nanoid(),
    checkpoint: checkpoint.id,
    type: 107,
    memo: '摇一摇',
    content: '',
    content_css: '',
    image: '',
    image_css: '',
    front_image: '',
    front_image_css: '',
  }
  showFlowRef.value.handleAddNode(operationTask)
}

function addTaskQuestion() {
  const operationTask = {
    code: nanoid(),
    checkpoint: checkpoint.id,
    type: 200,
    memo: '选择卡',
    content: '',
    content_css: '',
    image: '',
    image_css: '',
    front_image: '',
    front_image_css: '',
  }
  showFlowRef.value.handleAddNode(operationTask)
}

function addTaskQuestionItem() {
  const operationTask = {
    code: nanoid(),
    checkpoint: checkpoint.id,
    type: 201,
    memo: '普通分支',
    content: '',
  }
  showFlowRef.value.handleAddNode(operationTask)
}

function addTaskRigthItem() {
  const operationTask = {
    code: nanoid(),
    checkpoint: checkpoint.id,
    type: 202,
    memo: '正确分支',
    content: '',
  }
  showFlowRef.value.handleAddNode(operationTask)
}

function addTaskRedoItem() {
  const operationTask = {
    code: nanoid(),
    checkpoint: checkpoint.id,
    type: 203,
    memo: 'REDO',
    content: '',
  }
  showFlowRef.value.handleAddNode(operationTask)
}

function addTaskOperationExit() {
  const operationTask = {
    code: nanoid(),
    checkpoint: checkpoint.id,
    type: 300,
    memo: '结束卡',
    content: 'exit'
  }
  showFlowRef.value.handleAddNode(operationTask)
}

function addTaskOperation() {
  const operationTask = {
    code: nanoid(),
    checkpoint: checkpoint.id,
    type: 301,
    memo: '晋级卡',
    content: ''
  }
  showFlowRef.value.handleAddNode(operationTask)
}

function addTaskTools() {
  const operationTask = {
    code: nanoid(),
    checkpoint: checkpoint.id,
    type: 204,
    memo: '道具卡',
    content: '',
    content_css: '',
    image: '',
    image_css: '',
    front_image: '',
    front_image_css: '',
  }
  showFlowRef.value.handleAddNode(operationTask)
}

function addTaskGame001() {
  // 凯撒密码
  const operationTask = {
    code: nanoid(),
    checkpoint: checkpoint.id,
    type: 150,
    memo: '凯撒密码游戏',
    content: '',
    content_css: '',
    image: '',
    image_css: '',
    front_image: '',
    front_image_css: '',
  }
  showFlowRef.value.handleAddNode(operationTask)
}

let splitterModel = ref(20)
let link = ref('')


</script>

<template>
  <q-page>

    <q-splitter v-model="splitterModel">

      <template v-slot:before>
        <q-list dense bordered padding class="rounded-borders">
          <!--欢迎页面-->
          <q-item-label header>欢迎页面</q-item-label>

          <q-item clickable v-ripple :active="link === checkpoint.id" @click="link = checkpoint.id" active-class="my-menu-link" v-for="checkpoint in welcome_checkpoint_list" :key="checkpoint.id">
            <q-item-section avatar>
              <q-icon name="description" />
            </q-item-section>
            <q-item-section @click="onMenuClick(checkpoint.id)">{{ checkpoint.name }}</q-item-section>
          </q-item>

          <q-separator/>

          <!--主线任务-->
          <q-item-label header>主线任务</q-item-label>
          <q-item clickable v-ripple :active="link === checkpoint.id" @click="link = checkpoint.id" active-class="my-menu-link" v-for="checkpoint in main_checkpoint_list" :key="checkpoint.id">
            <q-item-section avatar>
              <q-icon name="description" />
            </q-item-section>
            <q-item-section @click="onMenuClick(checkpoint.id)">[{{ checkpoint.code }}] {{ checkpoint.name }}</q-item-section>
          </q-item>

          <q-separator/>

          <!--支线任务-->
          <q-item-label header>支线任务</q-item-label>
          <q-item clickable v-ripple :active="link === checkpoint.id" @click="link = checkpoint.id" active-class="my-menu-link" v-for="checkpoint in sub_checkpoint_list" :key="checkpoint.id">
            <q-item-section avatar>
              <q-icon name="description" />
            </q-item-section>
            <q-item-section @click="onMenuClick(checkpoint.id)">[{{ checkpoint.code }}] {{ checkpoint.name }}</q-item-section>
          </q-item>


        </q-list>
      </template>

      <template v-slot:after>

        <q-toolbar class="text-primary">
          <q-toolbar-title>
            {{ edit_checkpoint.name }}
          </q-toolbar-title>

          <div v-if="checkpoint.id!==undefined">
<!--            <q-btn @click="onSaveCheckpoint">save</q-btn>-->

            <q-btn-dropdown stretch flat label="交互模块">
              <q-list>
                <q-item-label header>用户信息交互</q-item-label>

                <q-item clickable v-close-popup tabindex="0" @click="addTaskMessage">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>图文卡</q-item-label>
                    <q-item-label caption>图文信息交互</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup tabindex="0" @click="addTaskAnswer">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>填空题</q-item-label>
                    <q-item-label caption>回答问题</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup tabindex="0" @click="addTaskCheck">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>确认卡</q-item-label>
                    <q-item-label caption>提示信息确认</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup tabindex="0" @click="addTaskKeys">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>密钥卡</q-item-label>
                    <q-item-label caption>显示密钥</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup tabindex="0" @click="addTaskTools">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>道具卡</q-item-label>
                    <q-item-label caption>显示道具</q-item-label>
                  </q-item-section>
                </q-item>
                <q-separator inset spaced />
                <q-item-label header>设备信息交互</q-item-label>

                <q-item clickable v-close-popup tabindex="0" @click="addTaskGPS">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>GPS卡</q-item-label>
                    <q-item-label caption>检查用户GPS位置</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup tabindex="0" @click="addTaskBeacon">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>蓝牙卡</q-item-label>
                    <q-item-label caption>扫描附近Beacon设备</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup tabindex="0" @click="addTaskScan">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>扫一扫</q-item-label>
                    <q-item-label caption>扫描附近二维码</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup tabindex="0" @click="addTaskShake">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>摇一摇</q-item-label>
                    <q-item-label caption>摇晃手机</q-item-label>
                  </q-item-section>
                </q-item>

              </q-list>
            </q-btn-dropdown>

            <q-btn-dropdown stretch flat label="游戏模块">
              <q-list>
                <q-item-label header>网页小游戏</q-item-label>

                <q-item clickable v-close-popup tabindex="0" @click="addTaskGame001">
                  <q-item-section avatar>
                    <q-avatar icon="sports_esports" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>凯撒密码</q-item-label>
                    <q-item-label caption>凯撒密码游戏</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup tabindex="0">
                  <q-item-section avatar>
                    <q-avatar icon="sports_esports" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>拼图卡</q-item-label>
                    <q-item-label caption>拼图游戏</q-item-label>
                  </q-item-section>
                </q-item>

              </q-list>
            </q-btn-dropdown>

            <q-btn-dropdown stretch flat label="分支模块">
              <q-list>
                <q-item-label header>控制剧情走向</q-item-label>

                <q-item clickable v-close-popup tabindex="0" @click="addTaskQuestion">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>选择题</q-item-label>
                    <q-item-label caption>分支信息交互</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup tabindex="0" @click="addTaskQuestionItem">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>普通分支</q-item-label>
                    <q-item-label caption>普通剧情分支</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup tabindex="0" @click="addTaskRigthItem">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>正确分支</q-item-label>
                    <q-item-label caption>判断/问答正确分支</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup tabindex="0" @click="addTaskRedoItem">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>REDO分支</q-item-label>
                    <q-item-label caption>重新执行前一个任务</q-item-label>
                  </q-item-section>
                </q-item>

              </q-list>
            </q-btn-dropdown>

            <q-btn-dropdown stretch flat label="功能模块">
              <q-list>
                <q-item-label header>控制剧情</q-item-label>

                <q-item clickable v-close-popup tabindex="0" @click="addTaskOperation">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>晋级卡</q-item-label>
                    <q-item-label caption>增减金币/启动分支</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup tabindex="0" @click="addTaskOperationExit">
                  <q-item-section avatar>
                    <q-avatar icon="assignment" color="primary" text-color="white" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>结束卡</q-item-label>
                    <q-item-label caption>结束任务</q-item-label>
                  </q-item-section>
                </q-item>

              </q-list>
            </q-btn-dropdown>

            <q-toggle v-model="showDetail" label="任务详情"/>
          </div>

        </q-toolbar>

        <task-detail :code="edit_checkpoint.id" :detail="showDetail" @onchange="saveCheckpointFlow"
                     ref="showFlowRef"></task-detail>
      </template>

    </q-splitter>
  </q-page>
</template>

<style scoped lang="sass">
.my-menu-link
  color: white
  background: #F2C037
</style>
